<template>
  <div class="my-2">
    <div ref="gridRef" class="border-t text-gray-950">
      <div class="border-l border-b border-r px-2 pb-2">
        <!-- 开票清单 -->
      <div class="text-center font-bold" style="font-size: 30px;">{{form.template_name}}</div>
      <div class="grid border-l border-t" style="grid-template-columns: repeat(16, minmax(0, 1fr))">
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">开票清单</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">公司主体</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">供应商</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">开票品名</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">开票单位</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">开票数量</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">实际含税单价</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">实际含税金额</div>
      </div>
      <div v-for="(d, i) in form.value.deliver_list" :key="i" class="grid border-l"
        style="grid-template-columns: repeat(16, minmax(0, 1fr))">
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.billing_no }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.company_name }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.supplier_name }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_name }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_unit }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.billing_num }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.billing_unit_price_tax }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.billing_price_tax }}</div>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  isLook: Boolean,
  edit: Boolean,
})
const emit = defineEmits(['update:modelValue', 'load'])
const form = computed({
  get() {
    return props.modelValue || {}
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

nextTick(() => {
  !props.edit && emit('load')
})
</script>